import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 1
    }

    render() {
        return (
            <div>
                {this.state.count}
                <button onClick={this.handleAdd1}>add1</button>
                <button onClick={this.handleAdd2}>add2</button>
            </div>
        )
    }

    handleAdd1 = () => {
        // setState方法的第二个参数是回调函数，在这里吗可以拿到最新的状态和dom
        // 这里调用以后并没有 +3 而是 加了1  => 为了性能考虑，react将多个setState进行了合并处理
        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log(this.state.count);
        })


        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log(this.state.count);
        })

        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log(this.state.count);
        })
    }


    handleAdd2 = () => {
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            })

            console.log(this.state.count);

            this.setState({
                count: this.state.count + 1
            })

            console.log(this.state.count);

            this.setState({
                count: this.state.count + 1
            })

            console.log(this.state.count);
        }, 0);
    }

}

/**
 * 如果setState处在同步的逻辑中， 异步更新状态，异步更新真实dom
 * 
 * 如果setState处在异步的逻辑中， 同步更新状态，同步更新真实dom
 * 
 * setState 接收第二个参数，第二个参数是回调函数，状态和dom更新完后就会被触发
 */
